<template>
  <div id="container"></div>
</template>

<script lang="ts">
import { Graph } from "@antv/x6";
import { defineComponent, onMounted } from "vue";

export default defineComponent({
  setup() {
    let graph: Graph;
    onMounted(() => {
      graph = new Graph({
        container: document.getElementById("container") as HTMLElement,
        height: 600,
        background: {
          color: "#fffbe6" // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true // 渲染网格背景
        },
        // 限制节点移动
        translating: {
          restrict(view) {
            const cell = view.cell;
            if (cell.isNode()) {
              const parent = cell.getParent();
              if (parent) {
                // 返回容器渲染到画布后的包围盒
                return parent.getBBox();
              }
            }
            return null;
          }
        }
      });
      const child = graph.addNode({
        x: 100,
        y: 80,
        width: 120,
        height: 60,
        label: "Child",
        zIndex: 10,
        attrs: {
          body: {
            stroke: "none",
            fill: "#3199FF"
          },
          label: {
            fill: "#fff"
          }
        }
      });
      const parent = graph.addNode({
        x: 40,
        y: 40,
        width: 240,
        height: 160,
        zIndex: 1,
        label: "Parent\n(try to move me)",
        attrs: {
          label: { refY: 130 },
          body: {
            fill: "#fffbe6"
          }
        }
      });
      parent.addChild(child);
    });

    return {};
  }
});
</script>

<style scoped></style>
